<template>
    <div>
        <el-menu
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-menu-item
                v-for="(item, i) in navList"
                :key="i"
                :index="item.name"
            >
                <i :class="item.class"></i>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false,
            isCollapseText: "收缩",
            navList: [
                { name: "/", title: "主页", class: "el-icon-office-building" },
                {
                    name: "/broadcast",
                    title: "广播",
                    class: "el-icon-s-promotion",
                },
                {
                    name: "/history",
                    title: "历史",
                    class: "el-icon-document-checked",
                },
            ],
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
}
.el-menu {
    text-align: center;
    margin-left: -8px;
    border-right: #fff 0px solid;
}
</style>